<template>
  <div
    class="main_body"
    v-loading="loading"
    :style="'height:' + height"
    ref="mainBodyRef"
  >
    <el-row style="height: 100%">
      <el-col :span="2" style="height: 100%" :style="'line-height:' + height">
        <el-button
          v-if="props.fileList.length > 1 "
          :disabled="viewSrc == 0"
          style="background-color: #606266 !important;"
          link
          @click="handleLeft"
          class="arrow"
        >
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
      </el-col>
      <el-col :span="20" style="height: 100%">
        <el-image
        class="image"
        :infinite="false"
        :src="srcList[viewSrc]"
        :zoom-rate="1.2"
        :preview-src-list="srcList"
          :initial-index="viewSrc"
        >
          <template #error>
            <span class="el-image__error">暂无数据</span>
          </template>
        </el-image>
      </el-col>
      <el-col :span="2" style="height: 100%" :style="'line-height:' + height">
        <el-button
          v-if="props.fileList.length > 1"
          :disabled="viewSrc == props.fileList.length-1"
          style="background-color: #606266 !important;"
          link
          @click="handleRight"
          class="arrow"
        >
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
  fileList: {
    type: Array,
    default: [],
  },
  height: {
    type: Number,
  },
});

const height = ref("23vh");

const srcList = ref([]);
const loading = ref(false);
const viewSrc = ref(0);

watch(
  () => props.fileList,
  () => {
    imageView();
    getHeight();
    window.addEventListener("resize", getHeight);
  }
);

function imageView() {
  srcList.value = [];
  if (props.fileList.length === 0) {
    getHeight();
  } else {
    loading.value = true;
    props.fileList.forEach((item, index) => {
      proxy.$download.previewSharePicById(item.fileId).then((resp) => {
        srcList.value.push(resp);
        if (index + 1 == props.fileList.length) {
          loading.value = false;
        }
      });
    });
  }
}

function handleLeft() {
    viewSrc.value--;
}

function handleRight() {
    viewSrc.value++;
}

function getHeight() {
  if (props.fileList.length === 0) {
    height.value = "40px";
    return;
  }
  height.value =
    window.innerHeight -
    proxy.$refs["mainBodyRef"].getBoundingClientRect().top -
    props.height +
    "px";
}

onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>

<style scoped lang="scss">
.main_body {
  border: solid 2px #b6c2e2;
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.image {
  height: 100%;
}

:deep(.el-image__preview) {
  object-fit: contain;
}

:deep(.el-image__error) {
  background: none;
}

.arrow {
  font-size: 30px;
  background-color: #606266 !important;
  color: #fff !important;
  border-radius: 50%;
  width: 46px;
    height: 46px;
}

</style>
